<template lang="html">
  <div class="row">
    <div class="row-title"> {{ title }} </div>
    <div class="row-message" >
      <span  v-if="IS_VISIBLE">  {{ message }} </span>
      <slot></slot>

    </div>
  </div>

</template>

<script>
export default {

  props: {
    title: { type: String, default: '' },
    message: { type: String, default: '' }
  },

  data () {
    return {
      IS_VISIBLE: true
    }
  },

  methods: {
    sendMessage () {
      this.$emit('msg')
      console.log('i am practice')
    }
  }
}
</script>

<style lang="scss" scoped>

.row {

  width: 764px;
  padding: 30px 0px;
  border-bottom: 1px solid rgb(235, 238, 245);
  display: flex;

  .row-title {

    width: 140px;
    height: 36px;
    line-height: 36px;
    font-size: 15px;
    font-weight: 600;
    background-color: #886655;
  }

  .row-message {

    width: 560px;
    background-color: #994411;
    display: flex;

    span {

      height: 36px;
      line-height: 36px;
      margin-right: 16px;
    }

  }
}

</style>
